<template>
	<view>
		<view class="header">
			<view class="title">访客详情</view>
		</view>

		<view class="content">
			<!-- 基本信息 -->
			<view class="info-card">
				<view class="user-info">
					<image :src="visitorInfo.avatar_url" class="avatar"></image>
					<view class="info">
						<view class="nickname">{{visitorInfo.nickname}}</view>
						<view class="name-phone">
							<text>{{visitorInfo.name || '--'}}</text>
							<text class="divider">|</text>
							<text class="phone" @click="makePhoneCall(visitorInfo.phone)">{{visitorInfo.phone || '--'}}</text>
						</view>
					</view>
					<view class="status" :class="{'paid': visitorInfo.pay_status === 2}">
						{{visitorInfo.pay_status === 2 ? '已支付' : '未支付'}}
					</view>
				</view>
				<view class="stats-row">
					<view class="stat-item">
						<text class="label">访问次数</text>
						<text class="value">{{visitorInfo.visit_count || 0}}</text>
					</view>
					<view class="stat-item">
						<text class="label">最近访问</text>
						<text class="value">{{visitorInfo.visit_time || '--'}}</text>
					</view>
				</view>
				<view class="source-info" v-if="visitorInfo.clerk_nickname">
					<text class="label">溯源员工：</text>
					<text class="value">{{visitorInfo.clerk_nickname}}</text>
				</view>
				<view class="join-time">
					<text class="label">参与时间：</text>
					<text class="value">{{visitorInfo.join_time || '--'}}</text>
				</view>
			</view>

			<!-- 最近记录 -->
			<view class="record-card">
				<view class="card-header">
					<view class="tab-list">
						<view 
							class="tab-item" 
							:class="{'active': currentTab === 'visit'}"
							@click="switchTab('visit')"
						>最近记录</view>
						<view 
							class="tab-item" 
							:class="{'active': currentTab === 'follow'}"
							@click="switchTab('follow')"
						>跟进记录</view>
					</view>
				</view>
				<scroll-view 
					scroll-y="true" 
					@scrolltolower="loadMore" 
					class="record-scroll"
					:style="{height: scrollHeight + 'px'}"
				>
					<view v-if="currentTab === 'visit'">
						<view v-for="(item, index) in recordList" :key="index" class="record-item">
							<view class="time">{{item.create_time}}</view>
							<view class="event">
								<view class="operator-info">
									<image :src="item.operator_avatar" class="operator-avatar"></image>
									<text class="operator-name">{{item.operator_name}}</text>
								</view>
								<view class="operation-desc">{{item.operation_desc}}</view>
							</view>
						</view>
						<view class="loading" v-if="visitLoading">加载中...</view>
						<view class="no-more" v-if="!visitHasMore && recordList.length > 0">没有更多数据了</view>
					</view>
					<view v-else>
						<view v-for="(item, index) in followList" :key="index" class="record-item">
							<view class="time">{{item.create_time}}</view>
							<view class="event">
								<view class="tag">{{item.follow_type_text}}</view>
								<view class="remark" v-if="item.remark">{{item.remark}}</view>
								<view class="next-time" v-if="item.next_visit_time">
									下次回访：{{item.next_visit_time}}
								</view>
								<view class="operator-info">
									<image :src="item.operator_avatar" class="operator-avatar"></image>
									<text class="operator-name">{{item.operator_name}}</text>
								</view>
							</view>
						</view>
						<view class="loading" v-if="followLoading">加载中...</view>
						<view class="no-more" v-if="!followHasMore && followList.length > 0">没有更多数据了</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 跟进弹窗 -->
		<uni-popup ref="followPopup" type="bottom" v-if="currentTab === 'follow'">
			<view class="follow-modal">
				<view class="modal-header">
					<text class="title">跟进客户</text>
					<!-- <text class="close" @click="closeFollowModal">×</text> -->
				</view>
				<view class="modal-content">
					<view class="form-item">
						<text class="label">选择标签</text>
						<view class="tag-list">
							<view 
								v-for="(tag, index) in tagList" 
								:key="index"
								class="tag"
								:class="{'active': selectedTag === tag.value}"
								@click="selectTag(tag.value)"
							>
								{{tag.label}}
							</view>
						</view>
					</view>
					<view class="form-item">
						<text class="label">备注</text>
						<textarea 
							v-model="remark" 
							class="remark-input" 
							placeholder="请输入备注信息"
							maxlength="200"
						></textarea>
					</view>
					<view class="form-item">
						<text class="label">下次回访时间</text>
						<picker mode="date" :value="nextVisitTime" @change="onNextVisitTimeChange">
							<view class="picker">{{nextVisitTime || '请选择下次回访时间'}}</view>
						</picker>
					</view>
				</view>
				<view class="modal-footer">
					<button class="submit-btn" @click="submitFollow">保存</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as api from '@/api/staff'
	import storage from '@/utils/storage'
	
	export default {
		data() {
			return {
				activityId: 0,
				userId: 0,
				visitorInfo: {},
				recordList: [],
				followList: [],
				currentTab: 'visit', // 当前选中的标签页
				// 分页相关
				visitPage: 1,
				followPage: 1,
				visitHasMore: true,
				followHasMore: true,
				visitLoading: false,
				followLoading: false,
				scrollHeight: 0,
				// 跟进相关
				tagList: [
					{ label: '已经成交', value: 1 },
					{ label: '没有意向', value: 2 },
					{ label: '正在考虑', value: 3 },
					{ label: '其他', value: 4 }
				],
				selectedTag: 0,
				remark: '',
				nextVisitTime: ''
			}
		},
		onLoad(options) {
			this.activityId = storage.get('activityId')
			this.userId = options.user_id
			this.loadData()
			this.calculateScrollHeight()
		},
		onShow() {
			this.calculateScrollHeight()
		},
		methods: {
			calculateScrollHeight() {
				const systemInfo = uni.getSystemInfoSync()
				this.scrollHeight = systemInfo.windowHeight - 250 - 40 // 减去头部和底部的高度
			},
			loadData() {
				// 获取访客详情
				api.getVisitorDetail({
					activity_id: this.activityId,
					user_id: this.userId
				}).then(res => {
					if (res.code === 200) {
						this.visitorInfo = res.data
					}
				})
				
				// 获取最近记录
				this.loadRecordList()
			},
			// 加载最近记录
			loadRecordList() {
				if (this.currentTab === 'visit') {
					this.visitLoading = true
					api.getVisitorRecord({
						activity_id: this.activityId,
						user_id: this.userId,
						page: this.visitPage
					}).then(res => {
						if (res.code === 200) {
							if (this.visitPage === 1) {
								this.recordList = res.data
							} else {
								this.recordList = [...this.recordList, ...res.data]
							}
							this.visitHasMore = res.data.length > 0
						}
						this.visitLoading = false
					})
				} else {
					this.followLoading = true
					api.customerFollowUpList({
						user_id: this.userId,
						activity_id: this.activityId,
						page: this.followPage
					}).then(res => {
						if (res.code === 200) {
							if (this.followPage === 1) {
								this.followList = res.data
							} else {
								this.followList = [...this.followList, ...res.data]
							}
							this.followHasMore = res.data.length > 0
						}
						this.followLoading = false
					})
				}
			},
			// 加载更多
			loadMore() {
				if (this.currentTab === 'visit') {
					if (this.visitHasMore && !this.visitLoading) {
						this.visitPage++
						this.loadRecordList()
					}
				} else {
					if (this.followHasMore && !this.followLoading) {
						this.followPage++
						this.loadRecordList()
					}
				}
			},
			// 切换标签页
			switchTab(tab) {
				this.currentTab = tab
				if (tab === 'visit') {
					this.visitPage = 1
					this.visitHasMore = true
					this.recordList = []
				} else {
					this.followPage = 1
					this.followHasMore = true
					this.followList = []
				}
				this.loadRecordList()
			},
			// 获取标签文字
			getTagLabel(value) {
				const tag = this.tagList.find(item => item.value === value)
				return tag ? tag.label : '未知'
			},
			// 显示跟进弹窗
			showFollowModal() {
				this.$refs.followPopup.open()
			},
			// 关闭跟进弹窗
			closeFollowModal() {
				this.$refs.followPopup.close()
			},
			// 选择标签
			selectTag(value) {
				this.selectedTag = value
			},
			// 选择下次回访时间
			onNextVisitTimeChange(e) {
				this.nextVisitTime = e.detail.value
			},
			// 提交跟进
			submitFollow() {
				if (!this.selectedTag) {
					uni.showToast({
						title: '请选择标签',
						icon: 'none'
					})
					return
				}
				
				if (!this.remark.trim()) {
					uni.showToast({
						title: '请输入备注信息',
						icon: 'none'
					})
					return
				}
				
				if (!this.nextVisitTime) {
					uni.showToast({
						title: '请选择下次回访时间',
						icon: 'none'
					})
					return
				}
				
				var that = this;
				api.customerSubmitFollowUp({
					user_id: this.userId,
					activity_id: this.activityId,
					follow_type: this.selectedTag,
					remark: this.remark,
					next_visit_time: this.nextVisitTime
				}).then(res => {
					if (res.code === 200) {
						// 重置表单
						that.selectedTag = 0
						that.remark = ''
						that.nextVisitTime = ''
						
						// 显示成功提示
						uni.showToast({
							title: res.msg || '跟进成功',
							icon: 'success',
							duration: 1500,
							success: () => {
								// 等待提示显示完成后刷新列表
								setTimeout(() => {
									// 确保在跟进记录标签页
									that.currentTab = 'follow'
									// 重置分页
									that.followPage = 1
									that.followHasMore = true
									that.followList = []
									// 重新加载数据
									that.loadRecordList()
								}, 1500)
							}
						})
					} else {
						uni.showToast({
							title: res.msg || '提交失败',
							icon: 'none'
						})
					}
				})
			},
			// 拨打电话
			makePhoneCall(phone) {
				if (!phone) return
				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
						console.log('拨打电话成功')
					},
					fail: (err) => {
						console.log('拨打电话失败', err)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F7FB;
	}

	.header {
		background-color: #FFAC3E;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 250rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.header > .title {
		color: #fff;
		padding: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.content {
		position: relative;
		margin-top: 140rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.info-card, .record-card {
		width: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 24rpx;
		border: 2rpx solid #f0f0f0;
	}

	.info {
		flex: 1;
	}

	.nickname {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.name-phone {
		font-size: 26rpx;
		color: #999;
	}

	.name-phone .divider {
		margin: 0 10rpx;
	}
	
	.name-phone .phone {
		color: #2979ff;
		text-decoration: underline;
	}

	.status {
		font-size: 24rpx;
		color: #FF6B6B;
		padding: 6rpx 20rpx;
		border-radius: 24rpx;
		background-color: rgba(255, 107, 107, 0.1);
	}

	.status.paid {
		color: #4CAF50;
		background-color: rgba(76, 175, 80, 0.1);
	}

	.stats-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		margin: 0 10rpx;
	}

	.stat-item:first-child {
		margin-left: 0;
	}

	.stat-item:last-child {
		margin-right: 0;
	}

	.stat-item .label {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 6rpx;
	}

	.stat-item .value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.source-info, .join-time {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
		padding: 0 10rpx;
	}

	.source-info .label, .join-time .label {
		color: #999;
		margin-right: 8rpx;
	}

	.card-header {
		margin-bottom: 20rpx;
	}

	.tab-list {
		display: flex;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #FFAC3E;
		font-weight: 500;
	}

	.tab-item.active:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #FFAC3E;
		border-radius: 2rpx;
	}

	.record-item {
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.record-item:last-child {
		border-bottom: none;
	}

	.record-item .time {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.record-item .event {
		font-size: 28rpx;
		color: #333;
	}

	.operator-info {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.operator-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}

	.operator-name {
		font-size: 26rpx;
		color: #666;
	}

	.operation-desc {
		font-size: 28rpx;
		color: #333;
	}

	.record-item .tag {
		display: inline-block;
		padding: 4rpx 16rpx;
		background-color: rgba(255, 172, 62, 0.1);
		color: #FFAC3E;
		font-size: 24rpx;
		border-radius: 20rpx;
		margin-bottom: 8rpx;
	}

	.record-item .remark {
		font-size: 28rpx;
		color: #666;
		margin: 8rpx 0;
	}

	.record-item .next-time {
		font-size: 24rpx;
		color: #999;
	}

	.follow-btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #FFAC3E;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
	}

	.follow-modal {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.modal-header .title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.modal-header .close {
		font-size: 40rpx;
		color: #999;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-item .label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		display: block;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}

	.tag {
		margin: 10rpx;
		padding: 12rpx 24rpx;
		background-color: #f5f5f5;
		color: #666;
		font-size: 28rpx;
		border-radius: 30rpx;
	}

	.tag.active {
		background-color: #FFAC3E;
		color: #fff;
	}

	.remark-input {
		width: 100%;
		height: 200rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.picker {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
	}

	.modal-footer {
		margin-top: 40rpx;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #FFAC3E;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		border: none;
	}

	.record-scroll {
		width: 100%;
	}
	
	.loading, .no-more {
		text-align: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #999;
	}
</style> 